import React from 'react'
import UserModel from "../../../model/user";
import {Col, DatePicker, Modal, Row} from "antd";
import {dayDiff, defaultEnd, defaultStart, mb16} from "../user-total/user-total";
import ActivitySummary from "../../../component/ActivitySummary/ActivitySummary";
const { RangePicker } = DatePicker

class UserBehaviorModal extends React.Component {
    constructor(props) {
        super(props)
        this.model = new UserModel()
        this.state = {
            dayDiff: dayDiff,
            start: defaultStart,
            end: defaultEnd,
            zhuanfa: 0,
            xinwen: 0,
            shiping: 0,
            liaotian: [],
            shichang: 0,
            behavior: [],
        }
    }

    componentDidUpdate(prevProps, prevState, snapshot) {
        if (this.props.visible && prevProps.visible === false) {
            this.behavior()
        }
        if (this.props.visible === false && prevProps.visible) {
            this.setState({
                start: defaultStart,
                end: defaultEnd,
                dayDiff: dayDiff,
            })
        }
    }

    formatTime = (moment) => {
        return parseInt(moment.format('X'))
    }


    behavior = () => {
        const id = this.props.user.Id
        return this.model.behavior({
                uid: id,
                start: this.formatTime(this.state.start),
                end: this.formatTime(this.state.end),
            })
            .then(resp => {
                if (resp.data.ok) {
                    this.setState({
                        behavior: resp.data.ok,
                    })
                }
            })
    }

    onDateChange = (value,) => {
        const [start, end,] = value
        const dayDiff = end.diff(start, 'day')
        this.setState({
            start,
            end,
            dayDiff,
        }, () => {
            // this.get()
            this.behavior()
        })
    }

    render() {
        const behaviorModal = <Modal
            titile="查看用户行为"
            width='80%'
            visible={this.props.visible}
            footer={null}
            maskClosable={true}
            onCancel={this.props.onCancel}
        >

            <Row style={{...mb16, marginTop: '16px',}}>
                <Col span={6}>
                    <span>选中共 {this.state.dayDiff} 日：</span>
                </Col>
                <Col span={18}>
                    <RangePicker
                        showTime={{ format: 'HH:mm:ss' }}
                        format="YYYY-MM-DD HH:mm:ss"
                        onChange={this.onDateChange}
                        onOk={this.onDateOk}
                        defaultValue={[
                            this.state.start,
                            this.state.end,
                        ]}
                        value={[
                            this.state.start,
                            this.state.end,
                        ]}
                    />
                </Col>
            </Row>
            <ActivitySummary
                activity={this.state.behavior}
            />
        </Modal>
        return behaviorModal
    }
}

export default UserBehaviorModal